<script setup="">
import {onMounted, ref} from "vue"

defineProps({
  msg: {
    type: String,
    required: false,
  }
})

const dataList = ref([])
const page = ref(1)
const size = ref(20)
const total = ref(0)
const sort = ref(1)

async function getData() {
  const res = await adminGetFeedback({
    "keyword": keyword.value,
    "page": page.value,
    "size": size.value,
    "sort": sort.value,
  })
  total.value = res.data.total
  dataList.value = res.data.list
}

onMounted(() => {
  getData()
})

const sortPopVisible = ref(false)
const keyword = ref("")

import {Search} from "@element-plus/icons-vue"
import {adminGetFeedback} from "@/request/mid_interface.js";
import FeedbackCard from "@/components/feedback/FeedbackCard.vue";

</script>

<template>
  <div class="px-5 my-3 mx-auto pt-1" style="max-width: 1400px">
    <div class="flex justify-between ml-3">
      <div class="flex items-center text-gray-500">
        <el-popover :visible="sortPopVisible" placement="bottom" :width="150" trigger="click">
          <template #reference>
            <div @click="sortPopVisible=!sortPopVisible" class="flex items-center mr-7 cursor-pointer select-none">
              <div>{{ ["", "最新", "", "最热"][sort] }}</div>
              <img class="ml-2 w-2.5 opacity-70" src="@/assets/img/arrow_down.svg" alt="">
            </div>
          </template>
          <div @click="sort=1;sortPopVisible=false;getData()"
               class="px-5 py-3 hover:bg-gray-100 transition cursor-pointer select-none rounded">最新
          </div>
          <div @click="sort=3;sortPopVisible=false;getData()"
               class="px-5 py-3 hover:bg-gray-100 transition cursor-pointer select-none rounded">最热
          </div>
        </el-popover>
      </div>
      <div class="flex items-center">
        <div class="flex items-center bg-white pl-4 rounded-full">
          <el-icon color="#888">
            <Search></Search>
          </el-icon>
          <input v-model="keyword" @keydown.enter="getData" class="py-2 pr-3 pl-2 bg-transparent outline-0"
                 placeholder="请输入关键字">
        </div>
        <div
            @click="getData"
            class="px-5 py-2 bg-white ml-3 rounded-full font-bold cursor-pointer select-none hover:opacity-60 transition">
          搜索
        </div>
      </div>
    </div>
    <div class="grid grid-cols-2 gap-3 mt-4">
      <template v-for="item in dataList">
        <FeedbackCard @refresh="getData" :param="item"></FeedbackCard>
      </template>
    </div>
    <div v-if="dataList.length===0">
      <el-empty description="没有数据"></el-empty>
    </div>
    <div class="flex justify-center mt-5">
      <el-pagination
          v-model:current-page="page"
          v-model:page-size="size"
          :hide-on-single-page="true"
          layout="prev, pager, next, jumper"
          :total="total"
          @size-change="getData"
          @current-change="getData"
      />
    </div>
  </div>
</template>

<style scoped>
/deep/ .el-date-editor .el-range-separator {
  color: #bbb;
  transform: translateY(-1px);
}

/deep/ .el-date-editor .el-range__icon {
  display: none;
}

/deep/ .el-range-input {
  font-size: 14.5px;
}
</style>
